<template>
  <view class="p-20rpx">
    <view v-if="news.title" class="bg-white rounded-16rpx p-20rpx">
      <h2>{{ news.title }}</h2>
      <h2 class="py-10rpx text-base text-first">{{ news.sub_title }}</h2>
      <view class="text-28rpx text-second">{{ news.content }}</view>
      <view class="text-24rpx text-third text-right pt-20rpx">
        {{ news.createTime }}
      </view>
    </view>
    <u-empty
      v-else
      margin-top="36%"
      icon="https://ui-resourse.oss-cn-shenzhen.aliyuncs.com/picture/2022/03/17/aUXPlIYfLUqWTgQl.png"
      text="暂无数据"
    />
  </view>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

import { getNewsApi } from './service'

@Component({ name: 'News' })
export default class News extends Vue {
  onLoad() {
    this.getData()
  }
  news: Recordable = {}
  async getData() {
    const { data } = await getNewsApi()
    this.news = data[0]
  }
}
</script>

<style scoped lang="scss"></style>
